import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";

import {registerMicroApps, start, initGlobalState} from 'qiankun';

const state = {
    globalMsg: 'global message'
}

const actions = initGlobalState(state)

actions.onGlobalStateChange((state, prev) => {
    console.log(state, prev)
})
setInterval(() => {
    actions.setGlobalState({
        ...state,
        times: Math.random()
    })
}, 1)

actions.offGlobalStateChange()

registerMicroApps([
    {
        name: 'react app1', // app name registered
        entry: '//localhost:3001',
        container: '#micro-app1',
        activeRule: '/r1',
        props: {
            msg: 'hello micro app1!'
        }
    },
    {
        name: 'react app2',
        entry: '//localhost:3002',
        container: '#micro-app2',
        activeRule: '/r2',
        props: {
            msg: 'hello micro app2!'
        }
    },
    {
        name: 'vue app1',
        entry: '//localhost:3003',
        container: '#micro-app3',
        activeRule: '/v1',
    },
    {
        name: 'vue app2',
        entry: '//localhost:3004',
        container: '#micro-app4',
        activeRule: '/v2',
    },
]);

start();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>
);
